<!-- 系统管理，用户管理 -->
<template>
    <!-- 筛选条件 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="用户名">
            <el-select filterable clearable v-model="formInline.username" style="width: 240px">
                <el-option v-for="item in userSelectList" :key="item.id" :label="item.username" :value="item.username" />
            </el-select>
        </el-form-item>

        <el-form-item label="企业名称" v-if="companySelect">
            <el-select filterable clearable v-model="formInline.companyId" style="width: 240px">
                <el-option v-for="item in companyNameList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
        </el-form-item>

        <el-form-item label="角色">
            <el-select filterable clearable v-model="formInline.role" style="width: 240px">
                <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button icon="Search" @click="getUserPage">查询</el-button>
            <el-button type="success" icon="Plus" @click="isAddShow = true">新增</el-button>
        </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="userList" stripe border style="width: 100%;">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="companyName" label="企业名称" v-if="companyColumn"/>
        <el-table-column prop="username" label="用户名">
            <template #default="scope">
                <div style="display: flex; align-items: center;">
                    <img v-if="scope.row.avatar" :src="scope.row.avatar" style="width: 30px; height: 30px; border-radius: 30px;" />
                    <span style="margin-left: 10px;">{{ scope.row.username }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机" />
        <el-table-column prop="role" label="角色" width="150">
            <template #default="scope">
                <div class="tag-box-main">
                    <template v-for="item in scope.row.role.split(',')" :key="item">
                        <el-tag type="primary" round size="small" v-if="item == 1">超级管理员</el-tag>
                        <el-tag type="success" round size="small" v-if="item == 2">管理员</el-tag>
                        <el-tag type="info" round size="small" v-if="item == 3">牛场负责人</el-tag>
                        <el-tag type="warning" round size="small" v-if="item == 4">牛场员工</el-tag>
                        <el-tag type="info" round size="small" v-if="item == 5">生产人员</el-tag>
                        <el-tag type="info" round size="small" v-if="item == 6">销售人员</el-tag>
                        <el-tag type="info" round size="small" v-if="item == 7">兽医</el-tag>
                        <el-tag type="info" round size="small" v-if="item == 8">性能测定员</el-tag>
                        <el-tag type="info" round size="small" v-if="item == 9">育种员</el-tag>
                    </template>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="enable" label="是否启用" width="90">
            <template #default="scope">
                <el-switch
                    @change="changeEnable(scope.row)"
                    :model-value="scope.row.enable"
                    inline-prompt active-text="启用" 
                    inactive-text="禁用"
                    style="--el-switch-on-color: #409eff; --el-switch-off-color: #ff4949;"
                    />
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
            <template #default="scope">
                <el-button type="primary" icon="Edit" size="small" @click="editUserInfo(scope.row.id)">编辑</el-button>
                <el-button type="info" icon="Tickets" size="small" @click="viewUserInfo(scope.row.id)">详情</el-button>
            </template>
        </el-table-column>
    </el-table>
    <br/>
    <!-- 分页器 -->
    <el-pagination
        v-model:currentPage="pageNo"
        v-model:page-size="limit"
        :page-sizes="[10, 20, 30]"
        :small="false"
        :background="true"
        layout="prev, pager, next, jumper, ->, sizes, total"
        :total="total"
        @current-change="getUserPage"
        @size-change="sizeChange"
    />

    <!-- 新增用户 -->
    <addUser :isAddShow="isAddShow" @closeIsAddShow="closeIsAddShow"></addUser>
    <!-- 编辑用户 -->
    <editUser :isEditShow="isEditShow" :userId="userId" @closeIsEditShow="closeIsEditShow"></editUser>
    <!-- 详情 -->
    <detaildUser :isDetailsShow="isDetailsShow" :userDetailsId="userDetailsId" @closeIsDetailsShow="closeIsDetailsShow"></detaildUser>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import addUser from './add/index.vue'
import editUser from './Edit/index.vue'
import detaildUser from './details/index.vue'
import { reqGetUserPage, reqUserUpdate, reqGetRoleList, reqGetUserSelectList } from '@/api/user'
import { reqGetCompanyNameList } from '@/api/company'
// 引入用户相关小仓库
import useUserStore from '@/store/modules/user'
let userStore = useUserStore()
const companyColumn = userStore.componentConfig.companyColumn // 企业名称列-是否显示
const companySelect = userStore.componentConfig.companySelect // 企业下拉-是否显示
const addButton = userStore.componentConfig.addButton // 新增按钮-是否显示
const deleteButton = userStore.componentConfig.deleteButton // 删除按钮-是否显示
const editButton = userStore.componentConfig.editButton // 编辑按钮-是否显示
const errorButton = userStore.componentConfig.errorButton // 数据异常按钮-是否显示
const uploadButton = userStore.componentConfig.uploadButton // 导入按钮-是否显示

// 添加用户弹窗的显示与隐藏
let isAddShow = ref(false)

// 编辑用户弹窗的显示与隐藏
let userId = ref('')
let isEditShow = ref(false)

// 详情弹窗的显示与隐藏
let userDetailsId = ref('')
let isDetailsShow = ref(false)

// 收集表单数据
const formInline = reactive({
    username: '', // 用户名
    companyId: '', // 企业名
    role: '' // 角色
})

// 表格数据
const userList = ref([])

// 分页器当前页码
let pageNo = ref(1)
// 每一页展示多少条数据
let limit = ref(10)
// 数据总条数
let total = ref(0)

// 自定义事件，关闭弹窗（新增弹窗）
const closeIsAddShow = (val) => {
    getUserPage()
    isAddShow.value = val
}

// 自定义事件，关闭弹窗（编辑弹窗）
const closeIsEditShow = (val) => {
    getUserPage()
    isEditShow.value = val
}

// 自定义事件，关闭弹窗（详情弹窗）
const closeIsDetailsShow = (val) => {
    isDetailsShow.value = val
}

// 获取用户列表
const getUserPage = async () => {
    let res = await reqGetUserPage({
        pageNumber: pageNo.value, // 页号
        pageSize: limit.value, // 每页数量
        companyId: formInline.companyId, // 企业名
        role: formInline.role, // 角色
        username: formInline.username // 用户名
    })
    userList.value = res.data.records // table 赋值
    total.value = res.data.totalRow // 总页数赋值
}

// 分页的下拉菜单发生改变时触发
const sizeChange = () => {
    pageNo.value = 1
    getUserPage()
}

// 点击编辑按钮
const editUserInfo = (id) => {
    isEditShow.value = true
    userId.value = id
}

// 点击详情按钮
const viewUserInfo = (id) => {
    isDetailsShow.value = true
    userDetailsId.value = id
}

// 修改table每行用户的启用与禁用
const changeEnable = (data) => {
    ElMessageBox.confirm(
        `${data.enable ? '是否禁用' : '是否启用'}`,
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(async () => {
        data.enable = !data.enable
        let res = await reqUserUpdate(data)
        if(res.status == 200){
            ElMessage({
                message: '操作成功',
                type: 'success'
            })
            getUserPage()
        }
    })
}

// 获取用户角色下拉列表
let roleList = ref([])
const getRoleList = async () => {
    let res = await reqGetRoleList()
    roleList.value = res.data
}

// 获取企业下拉列表
let companyNameList = ref([])
const getCompanyNameList = async () => {
    let res = await reqGetCompanyNameList()
    companyNameList.value = res.data
}

// 获取用户下拉列表
let userSelectList = ref([])
const getUserSelectList = async () => {
    let res = await reqGetUserSelectList()
    userSelectList.value = res.data
}

// 组件挂载完毕
onMounted(() => {
    getUserPage()
    getRoleList()
    getCompanyNameList()
    getUserSelectList()
})
</script>

<style scoped lang="scss">
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
.tag-box-main{
    .el-tag{
        margin-right: 5px;
        &:last-child{
            margin-right: 0px;
        }
    }
}
</style>